<template>
  <div ref="BarCharts" class="bar-charts"></div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    title: {
      type: String,
      default() {
        return ''
      }
    },
    xData: {
      type: Array,
      default() {
        return []
      }
    },
    yData: {
      type: Array,
      default() {
        return []
      }
    },
    isVertical: {
      type: Boolean,
      default() {
        return false
      }
    },
    xLabelIsShow: {
      type: Boolean,
      default() {
        return true
      }
    },
    xAxisLineShow: {
      type: Boolean,
      default() {
        return true
      }
    },
    yLabelIsShow: {
      type: Boolean,
      default() {
        return true
      }
    },
    isShowBackground: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    xData: {
      handler(val) {
        if (val.length > 0) {
          this.barChart()
        }
      },
      deep: true
    },
    yData: {
      handler(val) {
        if (val.length > 0) {
          this.barChart()
        }
      },
      deep: true
    }
  },
  mounted () {
    this.barChart()
  },
  methods: {
    barChart () {
      let barChars = this.$echarts.init(this.$refs.BarCharts)
      let datas = this.isVertical ? this.yData : this.xData
      let xAxis = {
          type: 'value',
          axisLine: {
            show: this.xAxisLineShow,
            color: '#01beeb;'
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: this.xLabelIsShow,
            interval: 0,
            textStyle: {
              fontSize: '24',
              color: '#ffffff'
            }
          },
          data: this.xData
        }
      let yAxis = {
        name: '次数',
        nameTextStyle: {
          color: '#ffffff',
          fontSize: 16,
          align: 'right'
        },
        type: 'category',
        data: this.yData,
        splitLine: {
          show: true
        },
        axisLine: {
          show: this.yLabelIsShow,
          color: '#000000'
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: this.yLabelIsShow,
          textStyle: {
            fontSize: '24',
            color: '#ffffff'
          }
        }
      }
      if (this.isVertical) {
        xAxis.type = 'category'
        yAxis.type = 'value'
      }
      let option = {
        title: {
          show: false,
          text: this.title,
          left: '40%',
          top: '6%',
          textStyle: {
            fontSize: '16',
            color: '#ffffff',
            textShadowColor: '#ffffff',
            textShadowBlur: '10',
            textShadowOffsetY: 0,
            textShadowOffsetX: 0
          }
        },
        xAxis: xAxis,
        yAxis: yAxis,
        grid: {
          top: 40,
          left: 100
        },
        series: [
          {
            data: datas,
            type: 'bar',
            barWidth: 22,
            label: {
              show: false,
              position: this.isVertical ? 'top' : 'right',
              textStyle: {
                color: '#ffffff',
                fontSize: '10'
              }
            },
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgba(5,106,175,0)'}, {offset: 1, color: 'rgba(95,250,255,1)'}])
              }
            },
            showBackground: this.isShowBackground,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      barChars.setOption(option)
      window.addEventListener('resize', e => {
        barChars.resize()
      })
    }
  }
}
</script>

<style scoped>
  .bar-charts {
    width: 100%;
    height: 100%;
  }
</style>
